@import '../../style/mixin.scss';

.login-tips {
  @include font(.13rem, red);
  padding: .08rem .16rem;

  a {
    color: #3b95e9;
  }
}

.login-button {
  margin: 0 .15rem .1rem;
  @include font(.17rem, #fff);
  background-color: #4cd964;
  padding: .13rem 0;
  border-radius: 0.02rem;
  text-align: center;
}

.button-switch {
  background-color: #ccc;
  @include flex;
  @include wh(.5rem, .28rem);
  border-radius: 0.5rem;
  position: relative;

  .circle-button {
    transition: all .3s;
    position: absolute;
    z-index: 1;
    left: 0;
    top: -0.01rem;
    background-color: #f1f1f1;
    @include wh(.28rem, .28rem);
    border-radius: 50%;
  }

  .trans_to_right {
    transform: translateX(.23rem)
  }

  span {
    @include font(.12rem, #fff);
    transform: translateY(.01rem);
  }

  span:nth-of-type(2) {
    transform: translateY(-.04rem);
    margin-left: 0.06rem;

  }
}

.change-to-text {
  background-color: #4cd964;
}

.to-forget {
  float: right;
  @include font(.14rem, #3b95e9);
  margin-right: .16rem;
}

.login-form {
  background-color: #fff;
  margin: .5rem 0 .4rem;

  .input-container {
    height: .5rem;
    @include flex(space-between);
    padding: 0 .16rem;
    border-bottom: 1px solid #f1f1f1;

    input {
      @include font(.15rem, #666)
    }
  }

  .captcha-code-container {
    .img-change-img {
      @include flex;

      img {
        @include wh(.82rem, .35rem);
        font-size: .14rem;
      }

      .change-img {
        @include flex();
        flex-direction: column;
        flex-wrap: wrap;
        width: .6rem;

        p {
          @include font(.13rem, #666)
        }
      }
    }
  }
}